<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/26
  Time: 11:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN" style="height: 100%">
<head>
    <meta content="text/html" http-equiv="Content-Type" charset="utf-8">
    <title>网约车出行大数据分析</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="echarts-js/incubator-echarts-master/dist/echarts.min.js"></script>
    <script type="text/javascript" src="echarts-js/echarts-gl-master/src/echarts-gl.js"></script>
    <script type="text/javascript" src="echarts-js/echarts-stat-master/src/ecStat.js"></script>
    <script type="text/javascript" src="echarts-js/incubator-echarts-master/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="echarts-js/incubator-echarts-master/map/js/china.js"></script>
    <script type="text/javascript" src="echarts-js/incubator-echarts-master/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ueVGa8cEEy9jaO96GsGTpmoPYUMC9Uj8&__ec_v__=20190126"></script>
    <script type="text/javascript" src="echarts-js/incubator-echarts-master/dist/extension/bmap.min.js"></script>
    <script src="map/js/510100_sichuan_chengdu.js"></script>
    <link rel="stylesheet" href="css/index-test.css">
    <style type="text/css">

    </style>
</head>
<body class="new-bg">
<div class="header">
    <%-- 静态数据，订单数量 --%>
    <div class="statistics">
        <div class="word">
            <div class="kong1"></div>
            <span class="txt">订单总数</span>
            <div class="kong2"></div>
            <span class="num" style="color: #03e599;">11779076</span>
        </div>
        <div class="word">
            <div class="kong1"></div>
            <span class="txt">工作日订单数量</span>
            <div class="kong2"></div>
            <span class="num" style="color: #02defd;">7367945</span>
        </div>
        <div class="word">
            <div class="kong1"></div>
            <span class="txt">周末订单数量</span>
            <div class="kong2"></div>
            <span class="num" style="color: #fba025;">3110598</span>
        </div>
        <div class="word">
            <div class="kong1"></div>
            <span class="txt">节假日订单数量</span>
            <div class="kong2"></div>
            <span class="num" style="color: #02defd;">1300533</span>
        </div>
    </div>

</div>

<div class="main" style="">
    <%-- 上下车热力图 --%>
    <div class="main-left">

        <div class="border-top">
            <div class="exchange-l">
                <div class="div-button">
                    <button id="mapBtn1" class="map-button" style="background: url('images/buttonHeatMap.png'); display: block;"></button>
                    <button id="mapBtn2" class="map-button" style="background: url('images/buttonOD.png'); display: none;"></button>
                </div>
            </div>
            <div class="txt-l">
                <div id="heatmapTxt1" class="heatmap-txt" style="display: none;">
                    <span class="main-span">上车地点热力图</span>
                </div>
                <div id="heatmapTxt2" class="heatmap-txt" style="left: 143px; display: none;">
                    <span class="main-span">下车地点热力图</span>
                </div>
                <div id="odTxt" class="od-txt" style="display: block;">
                    <span class="main-span">OD图</span>
                </div>
            </div>
        </div>

        <%--上车点热力图--%>
        <div id="orderStart" class="orderStartStyle" style="display: none;"></div>
        <%--下车点热力图--%>
        <div id="orderStop" class="orderStopStyle" style="display: none;"></div>
        <%-- OD图 --%>
        <div id="ODData" class="ODStyle" style="display: block;"></div>

    </div>

    <%-- 轨迹图 --%>
    <div class="main-right">

        <div class="border-top">
            <div class="exchange-2">
                <form class="div-select" name="form1" id="form1" action="index.jsp" method="post">
                    <select name="dayName" style="width: 150px;">
                        <option value ="day1_2to4" selected="selected">10月1日2-4时</option>
                        <option value ="day6_18to20">10月6日18-20时</option>
                        <option value="day15_11to13">10月15日11-15时</option>
                    </select>
                    <select name="inOrOut">
                        <option value ="out_200m_" selected="selected">离开</option>
                        <option value ="in_200m_">进入</option>
                    </select>
                    <select>
                        <option value ="volvo1" selected="selected">火车北站</option>
                    </select>
                    <input type="button" class="submitButton" value="确定" onclick="exchange()" />
                </form>
            </div>
            <div class="txt-2">
                <div class="pointOut-txt" style="">
                    <span class="main-span">轨迹图</span>
                </div>
            </div>
        </div>

        <%-- 轨迹图 --%>
        <div id="pointOut" class="trackStyle"></div>

    </div>

</div>



<div class="footer">

    <%-- 柱状图与折线图 --%>
    <div class="source">
        <%-- 每日订单数量 --%>
        <button id="showHidden" class="shouHiddenButton"></button>
        <div class="charts" style="margin-left: 0px;">
            <div id="orderNum" class="orderNumStyle"></div>
            <div id="orderNum11" class="orderNumStyle11"></div>
        </div>
        <%--<div class="charts" id="orderNum"></div>--%>
        <%-- 不同时期的订单数量 --%>
        <div class="charts" id="orderNumSection"></div>
        <%-- 订单时长 --%>
        <div class="charts" id="orderTime"></div>
        <%-- 司机载客时长 --%>
        <div class="charts" id="workTime"></div>
    </div>

</div>



<script type="text/javascript" src="js/orderNum.js"></script>
<script type="text/javascript" src="js/orderNum11.js"></script>
<script type="text/javascript" src="js/orderNumSection.js"></script>
<script type="text/javascript" src="js/orderTime.js"></script>
<script type="text/javascript" src="js/workTime.js"></script>
<script type="text/javascript" src="js/pointOut.js"></script>
<script type="text/javascript" src="js/orderStart.js"></script>
<script type="text/javascript" src="js/orderStop.js"></script>
<script type="text/javascript" src="js/odData.js"></script>
<script type="text/javascript" src="js/exchangePointInOut.js"></script>
<script type="text/javascript">

    window.onload=function() {

    }

    window.onload=function() {
        var sh = document.getElementById("showHidden");
        var orderNum = document.getElementById("orderNum");
        var orderNum11 = document.getElementById("orderNum11");
        sh.onclick=function() {
            if(orderNum.style.display == 'none') {
                orderNum.style.display = 'block';
            } else {
                orderNum.style.display = 'none';
            }
            if(orderNum11.style.display == 'block') {
                orderNum11.style.display = 'none';
            } else {
                orderNum11.style.display = 'block';
            }
            return false;
        }

        var btn1 = document.getElementById("mapBtn1");
        var btn2 = document.getElementById("mapBtn2");
        var orderStart = document.getElementById("orderStart");
        var orderStop = document.getElementById("orderStop");
        var ODData = document.getElementById("ODData");
        var heatmapTxt1 = document.getElementById("heatmapTxt1");
        var heatmapTxt2 = document.getElementById("heatmapTxt2");
        var odTxt = document.getElementById("odTxt");

        orderStart.style.display = 'block';
        orderStop.style.display = 'block';

        //OD图按钮
        btn1.onclick=function() {
            orderStart.style.display = 'block';
            orderStop.style.display = 'block';
            ODData.style.display = 'none';
            heatmapTxt1.style.display = 'block';
            heatmapTxt2.style.display = 'block';
            odTxt.style.display = 'none';

            if(btn1.style.display == 'block') {
                btn1.style.display = 'none';
            } else {
                btn1.style.display = 'block';
            }
            if(btn2.style.display == 'none') {
                btn2.style.display = 'block';
            } else {
                btn2.style.display = 'none';
            }
            return false;
        }
        //热力图按钮
        btn2.onclick=function() {
            orderStart.style.display = 'none';
            orderStop.style.display = 'none';
            ODData.style.display = 'block';
            heatmapTxt1.style.display = 'none';
            heatmapTxt2.style.display = 'none';
            odTxt.style.display = 'block';

            if(btn2.style.display == 'block') {
                btn2.style.display = 'none';
            } else {
                btn2.style.display = 'block';
            }
            if(btn1.style.display == 'none') {
                btn1.style.display = 'block';
            } else {
                btn1.style.display = 'none';
            }
            return false;
        }

    }
</script>
</body>
</html>

